<template>
  <div class="app-container">
    <div style="margin-top: 20px">
      <svg-icon
        icon-class="marker"
        style="color: #606266"
      ></svg-icon>
      <span class="font-small">基本信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col
          :span="6"
          class="table-cell-title"
        >订单号</el-col>
        <el-col
          :span="6"
          class="table-cell-title"
        >下单手机号</el-col>
        <el-col
          :span="12"
          class="table-cell-title"
        >下单时间</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.orderId }}</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.mobile }}</el-col>
        <el-col
          :span="12"
          class="table-cell"
        >{{ list.createTime }}</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell-title"
        >订单状态</el-col>
        <el-col
          :span="6"
          class="table-cell-title"
          style="height:37px"
        >订单类型</el-col>
        <el-col
          :span="12"
          class="table-cell-title"
          style="height:37px"
        >印象标签</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell"
          style="font-size: 13px"
        >{{ list.orderStatus | formatStatus }}</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.orderType | formatOrderType }}</el-col>
        <el-col
          :span="12"
          class="table-cell"
        >
          <el-popover
            placement="top-start"
            trigger="hover"
            :content="course.courseDesc"
          >
            <span slot="reference">{{ course.courseDesc }}</span>
          </el-popover>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell-title"
        >下单备注</el-col>
        <el-col
          :span="6"
          class="table-cell-title"
          style="height:37px"
        >评价星级</el-col>
        <el-col
          :span="12"
          class="table-cell-title"
          style="height:37px"
        >评论</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell"
          style="font-size: 13px"
        >{{ list.note }}</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{ score ? score.score : "" }}</el-col>
        <el-col
          :span="12"
          class="table-cell"
        >{{ score ? score.commentContent:"" }}</el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <svg-icon
        icon-class="marker"
        style="color: #606266"
      ></svg-icon>
      <span class="font-small">服务信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col
          :span="8"
          class="table-cell-title"
        >服务项目</el-col>
        <el-col
          :span="8"
          class="table-cell-title"
        >服务机构</el-col>
        <el-col
          :span="8"
          class="table-cell-title"
        >服务场馆</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="8"
          class="table-cell"
        >{{ list2.prodName }}</el-col>
        <el-col
          :span="8"
          class="table-cell"
        >{{ list3.channelName }}</el-col>
        <el-col
          :span="8"
          class="table-cell"
        >{{ list3.dealershipName }}</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="8"
          class="table-cell-title"
        >下单时间</el-col>
        <el-col
          :span="8"
          class="table-cell-title"
        >服务时间</el-col>
        <el-col
          :span="8"
          class="table-cell-title"
          style="height:37px"
        ></el-col>
      </el-row>
      <el-row>
        <el-col
          :span="8"
          class="table-cell"
        >{{ list.createTime }}</el-col>
        <el-col
          :span="8"
          class="table-cell"
        >{{ list.serviceSTime }}-{{ list.serviceETime }}</el-col>
        <el-col
          :span="8"
          class="table-cell"
        ></el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <svg-icon
        icon-class="marker"
        style="color: #606266"
      ></svg-icon>
      <span class="font-small">费用信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col
          :span="6"
          class="table-cell-title"
        >订单总金额</el-col>
        <el-col
          :span="6"
          class="table-cell-title"
        >订单实付金额</el-col>
        <el-col
          :span="12"
          class="table-cell-title"
        >支付时间</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.orderCash }}</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.orderStatus!=='000'&&list.orderStatus!=='001'?list.orderCash:'--' }}</el-col>
        <el-col
          :span="12"
          class="table-cell"
        >{{ list.orderPayType!=='00'&&list.orderStatus!=='000'&&list.orderStatus!=='001'?list.createTime:'--' }}</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell-title"
        >支付方式</el-col>
        <el-col
          :span="6"
          class="table-cell-title"
        >退款单号</el-col>
        <el-col
          :span="12"
          class="table-cell-title"
        >退款单创建时间</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.orderPayType | formatPayType }}</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.orderStatus==='005'?list.orderId:'--' }}</el-col>
        <el-col
          :span="12"
          class="table-cell"
        >{{ list.orderStatus==='005'?list.statusUpdateTime:'--' }}</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell-title"
        >退款完成时间</el-col>
        <el-col
          :span="6"
          class="table-cell-title"
        >退款金额</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.orderStatus==='005'?list.statusUpdateTime:'--' }}</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{ list.orderStatus==='005'?list.orderCash:'--' }}</el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <svg-icon
        icon-class="marker"
        style="color: #606266"
      ></svg-icon>
      <span class="font-small">操作信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col
          :span="4"
          class="table-cell-title"
        >操作者</el-col>
        <el-col
          :span="4"
          class="table-cell-title"
        >操作时间</el-col>
        <el-col
          :span="4"
          class="table-cell-title"
        >操作前的订单状态</el-col>
        <el-col
          :span="4"
          class="table-cell-title"
        >操作后的订单状态</el-col>
        <el-col
          :span="8"
          class="table-cell-title"
        >备注</el-col>
      </el-row>
      <el-row
        v-for="(item,index) in list1"
        :key="index"
      >
        <el-col
          :span="4"
          class="table-cell"
        >{{ item.userName }}</el-col>
        <el-col
          :span="4"
          class="table-cell"
        >{{ item.flowTime }}</el-col>
        <el-col
          :span="4"
          class="table-cell"
        >{{ item.preStatus | formatStatus }}</el-col>
        <el-col
          :span="4"
          class="table-cell"
        >{{ item.targetStatus | formatStatus }}</el-col>
        <el-col
          :span="8"
          class="table-cell"
        >{{ item.remark }}</el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// import { curCourseBaseGetById } from '@/api/course'
// import { deptLogListById } from '@/api/servDept'
import {
  queryOdrOrderDetails,
  queryOdrOrderLog,
  getProductById,
  scoreList,
} from "@/api/orderMs";
import { formatDate } from "@/utils/date";
export default {
  name: "CourseList",
  data() {
    return {
      goodId: "1",
      course: {},
      list: {},
      list1: [],
      list2: {},
      list3: [],
      score: {},
      total: null,
      targetType: "",
      listLoading: false,
      orderType: {
        "01": "服务订单",
        "02": "视频订单",
      },
    };
  },
  created() {
    // console.log(1,this.$route.query.id)
    queryOdrOrderDetails({ orderId: this.$route.query.id }).then((response) => {
      this.list = response.result;
      this.goodId = response.result.goodId;
      getProductById({ prodId: this.goodId }).then((response) => {
        console.log("3", response.data);
        this.list2 = response.data;
        this.list3 = response.data.prodChannelList[0];
        console.log(this.list3);
      });
    });
    queryOdrOrderLog({ orderId: this.$route.query.id }).then((response) => {
      console.log("3", response.result);
      this.list1 = response.result;
    });

    // "服务订单" 00
    if (this.list.orderType === "00") {
      this.targetType = "4";
    } else {
      this.targetType = "5";
    }
    const params = {
      targetType: this.targetType,
    };
    scoreList({ targetType: 4, targetId: this.$route.query.id }).then(
      (response) => {
        this.score = response.data;
        console.log(4, response);
      }
    );
  },
  filters: {
    formatOrderType(value) {
      if (value === "11") {
        return "服务订单到店";
      } else if (value === "12") {
        return "服务订单上门";
      } else {
        return "视频订单";
      }
    },
    formatCouerseType(typeList) {
      let type = "";
      typeList &&
        typeList.map((item, index) => {
          type = type + item.name + (typeList.length === index + 1 ? "" : "/");
        });
      return type;
    },
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    formatPayType(value) {
      if (value === "00") {
        return "线下支付";
      } else if (value === "01") {
        return "线上微信";
      } else {
        return "线上支付宝";
      }
    },
    formatStatus(value) {
      if (value === "000") {
        return "待支付";
      } else if (value === "001") {
        return "已取消";
      } else if (value === "002") {
        return "待服务";
      } else if (value === "003") {
        return "服务中";
      } else if (value === "004") {
        return "已完成";
      } else if (value === "005") {
        return "已退款";
      } else {
        return "已评价";
      }
    },
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.app-container {
  width: 80%;
  margin: 20px auto;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}

.coursePic {
  margin-top: 20px;
  max-width: 100%;
}
</style>
